<template>
  <div>
    <ind-header />
    <div class="login">
      <div class="login-tab">
        <div class="logo">
          <img src="../assets/logo_4.png" alt="" />
        </div>
        <div class="loginUser">
          <el-radio-group v-model="radio">
            <el-radio :label="1">普通用户</el-radio>
            <el-radio :label="2">医师</el-radio>
            <el-radio :label="3">美容师</el-radio>
          </el-radio-group>
        </div>
        <div class="loginUser">
          <i class="el-icon-user-solid loginIcon"></i
          ><input
            v-model="uname"
            id="uname"
            type="text"
            placeholder="用户名"
            autocomplete="off"
          />
        </div>
        <div class="loginUser">
          <i class="el-icon-lock loginIcon"></i
          ><input
            v-model="upwd"
            id="upwd"
            type="password"
            placeholder="密码"
            autocomplete="off"
            @keyup.enter="login"
          />
        </div>
        <span id="login" @click="login">登 录</span>
        <div class="remember">
          <div class="rem_left">
            <el-switch
              id="rem"
              v-model="rem"
              active-color="#ad6e3f"
              inactive-color="#ccc"
            >
            </el-switch>
            <label for="rem">记住密码</label>
          </div>
          <div class="rem_right">
            <span>忘记密码</span>
          </div>
        </div>
        <div class="others">
          <router-link to="/register"><span>创建账号</span></router-link>
          <router-link to=""><span>其他帮助</span></router-link>
        </div>
      </div>
    </div>
    <ind-footer />
  </div>
</template>

<script>
import IndHeader from "@/components/IndHeader.vue";
import IndFooter from "@/components/IndFooter.vue";
import { userLoginServe } from "../utils/service/user";
export default {
  components: { IndHeader, IndFooter },
  data() {
    return {
      radio: 1,
      msg: "",
      rem: true,
      uname: "",
      upwd: "",
    };
  },
  methods: {
    // 普通用户登录
    userLogin() {
      userLoginServe(this.uname, this.upwd)
        .then((res) => {
          this.msg = res.msg;
          if (res.code == 200) {
            let nickname = res.nickname;
            if (this.rem) {
              localStorage.setItem("loginUser", nickname);
              localStorage.setItem("identity", "user");
              localStorage.setItem("mcyztoken", this.$store.state.token);
            }
            this.$store.commit("setLoginUser", nickname);
            this.$store.commit("setIdentity", "user");
            this.$message({
              type: "success",
              message: this.msg,
            });
            // 跳转到登录原因页
            let path = sessionStorage["loginBack"] || "/";
            this.$router.push(path);
            delete sessionStorage["loginBack"];
          } else {
            this.$message({
              type: "error",
              message: this.msg,
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "error",
            message: "请求登录失败",
          });
        });
    },
    // 医师登录
    docLogin() {
      var url = `doctor/login`;
      var params = `docname=${this.uname}&docpwd=${this.upwd}`;
      this.axios
        .post(url, params)
        .then((res) => {
          console.log(res);
          this.msg = res.data.msg;
          if (res.data.code == 200) {
            let realname = res.data.data[0].realname;
            if (this.rem) {
              localStorage.setItem("identity", "doctor");
              localStorage.setItem("mcyzuname", realname);
            }
            this.$store.commit("setLoginUser", realname);
            this.$store.commit("setIdentity", "doctor");
            this.$message({
              type: "success",
              message: this.msg,
            });
            this.$router.push("/");
          } else {
            this.$message({
              type: "error",
              message: this.msg,
            });
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "网络请求出错，请检查网络",
          });
        });
    },
    // 美容师登录
    beauLogin() {
      var url = `beau/login`;
      var params = `bname=${this.uname}&bpwd=${this.upwd}`;
      this.axios
        .post(url, params)
        .then((res) => {
          console.log(res);
          this.msg = res.data.msg;
          if (res.data.code == 200) {
            let realname = res.data.data[0].realname;
            if (this.rem) {
              localStorage.setItem("identity", "beautician");
              localStorage.setItem("mcyzuname", realname);
            }
            this.$store.commit("setLoginUser", realname);
            this.$store.commit("setIdentity", "beautician");
            this.$message({
              type: "success",
              message: this.msg,
            });
            this.$router.push("/");
          } else {
            this.$message({
              type: "error",
              message: this.msg,
            });
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "网络请求出错，请检查网络",
          });
        });
    },
    // 点击登录
    login() {
      if (this.radio == 1) {
        this.userLogin();
      }
      if (this.radio == 2) {
        this.docLogin();
      }
      if (this.radio == 3) {
        this.beauLogin();
      }
    },
  },
};
</script>

<style>
.el-radio__input.is-checked .el-radio__inner {
  border-color: #ad6e3f;
  background: #ad6e3f;
}
.el-radio__input.is-checked + .el-radio__label {
  color: #ad6e3f;
}
</style>
<style lang="scss" scoped>
.login {
  background-color: #faf8e4;
  width: 100%;
  height: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  .login-tab {
    text-align: center;
    box-shadow: 0px 0px 5px #ccc;
    width: 550px;
    margin: 0 auto;
    border-radius: 16px;
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    font-weight: 600;
    color: #aaa;
    .logo > img {
      width: 150px;
      margin-bottom: 30px;
    }
    .loginUser {
      width: 80%;
      position: relative;
      margin-bottom: 30px;
      .loginIcon {
        opacity: 0.8;
        position: absolute;
        left: 20px;
        top: 17px;
      }
    }
    #uname,
    #upwd {
      border: 1px solid #ccc;
      border-radius: 30px;
      font-size: 14px;
      width: 100%;
      padding: 15px 45px;
    }
    #login {
      width: 80%;
      text-align: center;
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 20px;
      background-color: #ad6e3f;
      color: #fff;
      margin-bottom: 30px;
      user-select: none;
      cursor: pointer;
      &:active {
        opacity: 0.5;
      }
    }
    .remember {
      width: 80%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      label,
      span {
        user-select: none;
        cursor: pointer;
        &:hover {
          color: #ad6e3f;
        }
      }
      label {
        margin-left: 10px;
      }
    }
    .others {
      width: 80%;
      display: flex;
      justify-content: space-between;
      user-select: none;
      margin-bottom: 30px;
      span {
        cursor: pointer;
        &:hover {
          color: #ad6e3f;
          border-bottom: 1px solid #ad6e3f;
        }
      }
    }
  }
}
</style>
